<template>
	<div id="rightCounty">
		<div class="bg-color-black">
			<div class="d-flex pt-2 pl-2">
				<span style="color:#5cd9e8">
					<icon name="chart-bar"></icon>
				</span>
				<div class="d-flex">
					<span>价格走势图(元/斤)</span>
				</div>
			</div>
			<dv-charts :option="option" style="width: 5.25rem;height:4.25rem;" />
			<!-- <dv-conical-column-chart :config="config" style="width: 5.25rem;height:4.25rem;" /> -->
		</div>
	</div>
</template>

<script>
	import { getChinaJson, getProvinceJSON, getCityJSON, getOptionData } from "../api/get-json";
	export default {
		name: "rightCounty",
		data() {
			return {
				option: {
					legend: {
						data: [
							{
								name: '日龄',
								color: '#00baff'
							},
							{
								name: '乳鸽',
								color: '#ff5ca9'
							},
							{
								name: '老鸽',
								color: '#3de7c9'
							},
							{
								name: '光蛋',
								color: '#f5d94e'
							}
						],
						textStyle: {
							fill: '#fff'
						}
					},
					xAxis: {
						data: [
							'10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07'
						],
						axisLine: {
							style: {
								stroke: '#999'
							}
						},
						axisLabel: {
							style: {
								fill: '#999'
							}
						},
						axisTick: {
							show: false
						}
					},
					yAxis: {
						data: 'value',
						splitLine: {
							show: false
						},
						axisLine: {
							style: {
								stroke: '#999'
							}
						},
						axisLabel: {
							style: {
								fill: '#999'
							}
						},
						axisTick: {
							show: false
						},
						min: 0,
						max: 60
					},
					series: [
						{
							name: '日龄',
							data: [
								2.5, 3.5, 6.5, 6.5, 7.5, 6.5, 2.5
							],
							type: 'bar',
							barStyle: {
								fill: 'rgba(0, 186, 255, 0.4)'
							}
						},
						{
							name: '乳鸽',
							data: [
								2.5, 3.5, 6.5, 6.5, 7.5, 6.5, 2.5
							],
							type: 'line',
							lineStyle: {
								stroke: '#ff5ca9'
							},
							linePoint: {
								radius: 4,
								style: {
									fill: '#ff5ca9',
									stroke: 'transparent'
								}
							}
						},
						{
							name: '老鸽',
							data: [
								1.3, 2.3, 5.3, 5.3, 6.3, 5.3, 1.3
							],
							type: 'line',
							smooth: true,
							lineArea: {
								show: true,
								gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
							},
							lineStyle: {
								lineDash: [5, 5]
							},
							linePoint: {
								radius: 4,
								style: {
									fill: '#00db95'
								}
							}
						},
						{
							data: [
								0.2, 1.2, 4.2, 4.2, 5.2, 4.2, 0.2
							],
							type: 'line',
							name: '光蛋',
							lineArea: {
								show: true,
								gradient: ['rgba(245, 217, 79, 0.8)', 'rgba(245, 217, 79, 0.2)']
							},
							lineStyle: {
								stroke: '#f5d94e'
							},
							linePoint: {
								radius: 4,
								style: {
									fill: '#f5d94e',
									stroke: 'transparent'
								}
							}
						}
					]
				},

			}
		},
		mounted() {
			this.setData();


		},
		methods: {

			getPreviousDate(numOfDays) {
				var date = new Date();
				date.setDate(date.getDate() - numOfDays);
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				return month + "/" + day;
			},

			setData() {
				getOptionData().then(res => {
					let list = res.data;
					var count = 0;
					var price = [];
					var dates = [];
					//获取七天的日期
					for (var i = 6; i >= 0; i--) {
						var date = this.getPreviousDate(i);
						dates.push(date)
					}
					console.log(dates)
					for (var i = 0; i < list.length; i++) {

						if (list[i].type === 'price' && list[i].pid !== 0) {
							var data = "";
							data = list[i];
							price.push(data);
						}
					}

					for (var i = 0; i < price.length; i++) {
						this.option.legend.data[i].name = price[i].label;
						this.option.series[i].name = price[i].label
						var pay = Number(price[i].value);

						for (var j = 0; j < 7; j++) {
							var randomNum = Math.floor(Math.random() * (115 - 85 + 1)) + 85;
							pay=pay*randomNum/100;
							this.option.series[i].data[j]=pay;
						}

					}
					for (var i = 0; i < dates.length; i++) {
						this.option.xAxis.data[i] = dates[i];
					}

					console.log("this.option.data")
					console.log(this.option)
					this.option = { ...this.option };
					// this.option.legend.data=
				});

			},
			onCountyRowClick(row) {
				console.log(row);
			}
		}
	}

</script>

<style lang="scss" scoped>
	#rightCounty {
		padding: 0.2rem;
		height: 5.125rem;
		min-width: 3.75rem;
		border-radius: 0.0625rem;

		.bg-color-black {
			height: 4.8125rem;
			border-radius: 0.125rem;
		}

		.text {
			color: #c3cbde;
		}
	}
</style>